{% extends "base.html" %}

{% block title %}ExamPulse - 登录{% endblock %}

<!-- 登录页面专属CSS -->
{% block extra_css %}
<link rel="stylesheet" href="/static/users/css/login-style.css">
{% endblock %}

<!-- 登录页面内容 -->
{% block content %}
<div class="login-wrapper">
    <!-- 登录卡片：马卡龙风格 + 居中 -->
    <div class="login-card">
        <!-- 卡片顶部装饰条 -->
        <div class="login-card-decoration"></div>

        <!-- 登录标题 -->
        <div class="login-title text-center mb-5">
            <i class="fas fa-user-circle text-4xl text-pink-macaron mb-3"></i>
            <h2 class="fw-semibold text-gray-800">欢迎登录 ExamPulse</h2>
            <p class="text-gray-500 mt-1">请输入账号信息继续</p>
        </div>

        <!-- 登录表单 -->
        <form id="loginForm" method="POST" action="{% url 'users:user_login' %}" class="login-form">
            {% csrf_token %}
            <!-- 传递next参数（原有逻辑保留） -->
            {% if request.GET.next %}
                <input type="hidden" name="next" value="{{ request.GET.next }}">
            {% endif %}

            <!-- 用户名输入框 -->
            <div class="form-group mb-4">
                <label for="username" class="form-label login-label">
                    <i class="fas fa-user text-blue-macaron me-2"></i>用户名
                </label>
                <input
                    type="text"
                    id="username"
                    name="username"
                    class="form-control login-input {% if form.username.errors %}is-invalid{% endif %}"
                    placeholder="请输入用户名"
                    required
                    autocomplete="username"
                    value="{{ form.username.value|default:'' }}"
                >
                <!-- 错误提示（原有逻辑保留） -->
                {% if form.username.errors %}
                    <div class="invalid-feedback login-error-tip">
                        {{ form.username.errors.0 }}
                    </div>
                {% endif %}
            </div>

            <!-- 密码输入框（带显示/隐藏） -->
<div class="form-group mb-5">
    <label for="password" class="form-label login-label">
        <i class="fas fa-lock text-blue-macaron me-2"></i>密码
    </label>
    <div class="position-relative">
        <input
            type="password"
            id="password"
            name="password"
            class="form-control login-input {% if form.password.errors %}is-invalid{% endif %}"
            placeholder="请输入密码"
            required
            autocomplete="current-password"
        >
        <!-- 密码显示/隐藏按钮 -->
        <button type="button" id="togglePassword" class="login-toggle-btn position-absolute end-3 top-50 translate-middle-y">
            <i class="fas fa-eye text-gray-400"></i>
        </button>
        <!-- 密码错误提示 -->
        {% if form.password.errors %}
            <div class="invalid-feedback login-error-tip">
                {{ form.password.errors.0 }}
            </div>
        {% endif %}
    </div>
</div>

<!-- 记住密码 & 忘记密码 -->
<div class="d-flex justify-content-between align-items-center mb-5">
    <div class="form-check">
        <input
            type="checkbox"
            class="form-check-input login-check"
            id="rememberMe"
            name="remember"
        >
        <label class="form-check-label text-gray-600" for="rememberMe">
            记住我
        </label>
    </div>
    <a href="javascript:alert('请联系管理员重置密码')" class="text-blue-macaron login-forgot-link">
        忘记密码？
    </a>
</div>

<!-- 登录按钮 -->
<button type="submit" id="loginBtn" class="btn w-100 login-submit-btn">
    <span id="loginBtnText">登录系统</span>
    <span id="loginLoading" class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
</button>

<!-- 注册入口 -->
<div class="text-center mt-5">
    <span class="text-gray-600">还没有账号？</span>
    <a href="javascript:alert('注册功能暂未开放')" class="text-pink-macaron fw-medium ms-1">
        立即注册
    </a>
</div>
</form>
</div>
</div>
{% endblock %}

<!-- 登录页面专属JS -->
{% block extra_js %}
<script src="/static/users/js/login-script.js"></script>
{% endblock %}